<template>
    <div class="dialog-border dialogcontent" style="width:800px;height: 568px;">
        <div class="dialogtitle">
            <div class="title">{{ msg }}</div>
            <div class="closebutton" @click="closeDialog"></div>
        </div>

        <div class="borderhr"></div>
        <div class="dialog-main" style="flex-grow: 1;">

            <section style="padding-top:24px;padding-bottom: 24px; padding-right: 12px;">
                <b-field label="任务标题" custom-class="fieldtitle" horizontal>
                    <b-input placeholder="任务标题" size="is-medium" rounded v-model="taskInfo.Title"></b-input>
                </b-field>
                <b-field label="任务来源" custom-class="fieldtitle" horizontal>
                    <b-input placeholder="来源人/来源项目.." size="is-medium" rounded v-model="taskInfo.Location"></b-input>
                </b-field>
                <b-field label="截止时间" custom-class="fieldtitle" horizontal>
                    <b-datetimepicker v-model="taskInfo.EndDate" rounded size="is-medium" placeholder="点击选择"
                        :icon-right="taskInfo.EndDate ? 'close-circle' : ''" icon-right-clickable
                        @icon-right-click="taskInfo.EndDate = null" :append-to-body="true" :horizontal-time-picker="true"
                        :timepicker="{ incrementMinutes: 15 }">
                    </b-datetimepicker>
                </b-field>
                <b-field label="任务等级" custom-class="fieldtitle" horizontal>
                    <b-select placeholder="任务等级" expanded rounded size="is-medium" v-model="taskInfo.TypeLevel"
                        >
                        <option :value="1">主线任务</option>
                        <option :value="2">传说任务</option>
                        <option :value="3">委托任务</option>
                        <option :value="4">世界任务</option>
                    </b-select>
                </b-field>
                <b-field label="相关文件" custom-class="fieldtitle" horizontal>
                    <b-taginput v-model="taskInfo.RelatedFiles" attached :allow-new="false" size="is-medium"
                        :before-adding="(tagToAdd) => false" ref="taginput">

                        <template #empty>
                            点击下方按钮添加文件
                        </template>
                        <template #selected="props">
                            <b-tag v-for="tag,index in props.tags" :key="tag.Path" rounded closable
                                @close="$refs.taginput.removeTag(index, $event)">
                                {{ tag.DisplayName }}
                            </b-tag>
                        </template>
                    </b-taginput>
                </b-field>
                <b-field label="" custom-class="fieldtitle" horizontal>
                    <div style="display: flex; flex-direction: row; justify-content: space-around;">
                        <GenshinButton img="/img/ic_track.png" title="添加文件" @click="addfile" width="48%"></GenshinButton>
                        <GenshinButton img="/img/ic_track.png" title="添加目录" @click="adddir" width="48%"></GenshinButton>
                    </div>
                </b-field>
            </section>

        </div>
        <div class="borderhr"></div>
        <div class="dialogbuttons">
            <GenshinDialogButton img="/img/ic_dialog_cancel.png" @click="closeDialog" title="取消" width="48%">
            </GenshinDialogButton>
            <GenshinDialogButton img="/img/ic_dialog_ok.png" title="确认" @click="emitChange" width="48%">
            </GenshinDialogButton>
        </div>

    </div>
</template>
<script>

import GenshinDialogButton from '../components/GenshinDialogButton.vue';
import GenshinButton from '../components/GenshinButton.vue';

export default {
    name: "EditTaskDialog",
    components: { GenshinDialogButton, GenshinButton },
    props: ["initialtask"],
    data() {
        return {
            msg: "添加任务",
            taskInfo: {
                _id: "",
                Title: "",
                Content: "",
                EndDate: null,
                CompleteTime: null,
                RelatedFiles: [],
                Location: "",
                TypeLevel: 3,
                IsCompleted: false,
            },

            iscreate: false,
        };
    },
    methods: {
        closeDialog() {
            this.$emit("close");
        },

        printevent(ev) {
            console.log(ev);
        },

        addfile() {
            window.$.ajax("/api/todo/reqfile", {}).then(file => {
                var thefiles = JSON.parse(file);
                thefiles.forEach(thefile => {
                    for (var i = 0; i < this.taskInfo.RelatedFiles.length; i++) {
                        if (this.taskInfo.RelatedFiles[i].Path == thefile.Path) {
                            this.$buefy.toast.open('该文件已选择过')
                            return;
                        }
                    }
                    this.taskInfo.RelatedFiles.push(thefile);
                });

            }).catch((err) => { });
        },
        adddir() {
            window.$.ajax("/api/todo/reqfolder", {}).then(file => {
                var thefiles = JSON.parse(file);
                thefiles.forEach(thefile => {
                    for (var i = 0; i < this.taskInfo.RelatedFiles.length; i++) {
                        if (this.taskInfo.RelatedFiles[i].Path == thefile.Path) {
                            this.$buefy.toast.open('该文件已选择过')
                            return;
                        }
                    }
                    this.taskInfo.RelatedFiles.push(thefile);
                });
            }).catch((err) => { });
        },
        emitChange() {
            window._lastType = this.taskInfo.TypeLevel;
            if (this.taskInfo.Title == "") {
                this.$buefy.toast.open('请填写任务标题');
                return;
            }
            if (this.iscreate) {
                this.taskInfo.Content = this.taskInfo.Location + "似乎又有了新任务，在右上角编辑中可以补充详情。"
            }
            this.$emit("done", this.taskInfo);
        }
    },
    mounted() {
        if (this.initialtask && this.initialtask._id) {
            this.taskInfo = this.initialtask;
            this.msg = "编辑任务";
        }
        else {

            this.iscreate = true;
            this.taskInfo.Location = window._username;
            if(window._currentType < 1){
                this.taskInfo.TypeLevel = window._lastType;

            }else{
                this.taskInfo.TypeLevel = window._currentType;
            }
        }
    },
    watch: {

    }
};
</script>

<style scoped>
.dialogcontent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dialogtitle {
    position: relative;
    width: 100%;
    height: 50px;
    flex-shrink: 0;
}

.title {
    position: absolute;
    left: 0px;
    top: 0px;
    color: rgb(206, 188, 146);
    font-size: 26px;
    font-weight: bold;
    line-height: 50px;
    width: 100%;
    text-align: center;
}

.closebutton {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 0px;
    background-color: rgb(206, 188, 146);
    mask-image: url(/img/img_close_button.png);
    mask-size: 60% 60%;
    mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(/img/img_close_button.png);
    -webkit-mask-size: 60% 60%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
}


.borderhr {
    border-image: url(img/hr_big_border.png) 45 113;
    width: calc(100% - 32px);
    height: 12px;
    border-image-width: 14px 35px 0px 35px;
    border-top: 14px;
    margin-left: 16px;
    margin-right: 16px;
    border-image-outset: 2px 0px;
    opacity: 0.5;
    flex-shrink: 0;
}

.dialogbuttons {
    height: 80px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.dialog-main {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 94%;
}
</style>